<template>
  <div class="person zy-content">
    <div v-show="!isShowDetails">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
<!--          <Col span="4">-->
<!--            <div>-->
<!--              <p class="label">{{ $t('spareParts.company') }}</p>-->
<!--              <div class="ipt">-->
<!--                <Select v-model="searchParams.companyId" filterable clearable-->
<!--                        :placeholder="$t('common.PleaseSelect')">-->
<!--                  <Option v-for="(item, index) of companyList" :value="item.id" :key="index">-->
<!--                    {{ item.name }}-->
<!--                  </Option>-->
<!--                </Select>-->
<!--              </div>-->
<!--            </div>-->
<!--          </Col>-->
          <Col span="6">
            <div>
              <p class="label">{{ $t('equipmentscrapped.Location') }}</p>
              <div class="ipt">
                <Cascader :value.sync="searchParams.orgCodes"/>
<!--                <Cascader clearable :data="orgList" v-model="searchParams.orgCode"-->
<!--                          :placeholder="$t('common.PleaseSelect')"-->
<!--                          change-on-select></Cascader>-->
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t('fault.Maintenance') }}</p>
              <div class="ipt">
                <Select v-model="searchParams.receiveOrderBy" filterable clearable
                        :placeholder="$t('common.PleaseSelect')">
                  <Option v-for="(item, index) of userList" :value="item.id" :key="index" :label="item.realname">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t('fault.Generation') }}</p>
              <div class="ipt">
                <DatePicker :clearable="false" type="daterange" :value="dateTimeRange"
                            :placeholder="$t('common.PleaseSelect')"
                            @on-change="handleChangeDate"></DatePicker>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" v-has="'faultStatementPersonSearch'" type="primary" @click="changeNum()">{{ $t('common.Query') }}</Button>
                <Button v-has="'faultStatementPersonSearch'"
                    class="reset-btn"
                    @click="reset()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div class="list-layout mt16">
        <div class="btns clear">

          <span class="title">{{ $t('common.listInformation') }}</span>
          <Button v-has="'faultStatementPersonExport'" @click="exportTemplateClick">{{ $t('common.batchExport') }}</Button>
            <Button @click="getTableColumns(columns)">
                {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
            </Button>
        </div>
        <div class="tableContent">
          <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columnsList" :data="dataSource" @on-selection-change="handleSelectionChange">
            <template slot-scope="{ row }" slot="action">
              <span class="operationBtn" v-has="'faultStatementPersonView'" @click="showLookTable(row)"><i class="iconfont zy-common-chakan"></i>{{ $t('common.Check') }}</span>
              <!-- 查看 -->
            </template>
          </Table>
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" :selected="ids.length"/>
          <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
        </div>
      </div>
    </div>
    <div v-if="isShowDetails">
      <!-- 设备维修时间段 -->
      <lookTable :title="$t('fault.maintenancePeriod')"
                 :orgCodes.sync="searchParams.orgCodes"
                 :id=repairManId
                 :type=tableType
                 :dateTimeRange="dateTimeRange"
                 @cancel="isShowDetails = false"></lookTable>
    </div>
  </div>
</template>

<script>
import Cascader from '@/components/Cascader'
import fileDownload from "js-file-download";
import lookTable from './lookTable.vue'
import moment from "moment";
import recursion from "@/util/recursion";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "person",
    mixins:[toggleTableOperation],
  components: {
    lookTable,
    Cascader
  },
  data() {
    return {
      isShowDetails: false,
      ids: [],
      repairManId: '',
      tableType: 2,
      searchParams: {},
      checkBtnPermission: {},
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizeOption: [10, 20, 30],
      columns: [
        {
          type: 'selection',
          minWidth: 60,
          align: 'center',
        },
        {
          // title: "维修员",
          title: `${this.$t('fault.Maintenance')}`,
          key: "repairman",
          align: "center",
          minWidth: 180,
            resizable: true
        },
        {
          // title: "维修设备数",
          title: `${this.$t('fault.MaintainedEquipment')}`,
          key: "repairMachinesCount",
          align: "center",
          minWidth: 180,
            resizable: true
        },
        {
          //title: "接单总数",
          title: `${this.$t('fault.OrderAmount')}`,
          key: "orderReceiveCount",
          align: "center",
          minWidth: 140,
            resizable: true
        },
        {
          //title: "未开始",
          title: `${this.$t('fault.NotStarted')}`,
          key: "waitingRepairCount",
          align: "center",
          minWidth: 120,
            resizable: true
        },
        {
          //title: "维修中",
          title: `${this.$t('fault.Repairing')}`,
          key: "beRepairingCount",
          align: "center",
          minWidth: 100,
            resizable: true
        },
        {
          // title: "已完成",
          title: `${this.$t('fault.Complet')}`,
          key: "repairFinishedCount",
          align: "center",
          minWidth: 120,
            resizable: true
          // tooltip: true,
        },
        {
          // title: "最短响应用时（H）",
          title: `${this.$t('fault.MinResponseTime')}（H）`,
          key: "responseTimeMin",
          align: "center",
          minWidth: 220,
            resizable: true
          // tooltip: true,
        },
        {
          //title: "最长响应用时（H）",
          title: `${this.$t('fault.MaxResponseTime')}（H）`,
          key: "responseTimeMax",
          align: "center",
          minWidth: 220,
            resizable: true
          // ellipsis: true
        },
        {
          //  title: "平均响应用时（H）",
          title: `${this.$t('fault.AvResponseTime')}（H）`,
          key: "responseTimeAvg",
          align: "center",
          minWidth: 220,
            resizable: true
        },
        {
          // title: "最短维修用时（H）",
          title: `${this.$t('fault.MinRepairingTime')}（H）`,
          key: "repairTimeMin",
          align: "center",
          minWidth: 220,
            resizable: true
        },
        {
          //  title: "最长维修用时（H）",
          title: `${this.$t('fault.MaxRepairingTime')}（H）`,
          key: "repairTimeMax",
          align: "center",
          minWidth: 220,
            resizable: true
        },
        {
          //  title: "累计维修用时（H）",
          title: `${this.$t('fault.AccRepairingTime')}（H）`,
          key: "repairTimeSum",
          align: "center",
          minWidth: 220,
            resizable: true
        },
        {
          // title: "维修综合评分",
          title: `${this.$t('fault.ComprehensiveScore')}`,
          key: "maintenanceScore",
          align: "center",
          minWidth: 180,
            resizable: true
        },
        {
          // title: "累计工时成本（元）",
          title: `${this.$t('fault.CumulativeWorkTime')}`,
          key: "hourPrice",
          align: "center",
          minWidth: 280,
            resizable: true
        },
        {
          // title: "累计物料成本（元）",
          title: `${this.$t('fault.CumulativeMaterial')}`,
          key: "materielPrice",
          align: "center",
          minWidth: 250,
            resizable: true
        },
        {
          // title: "累计总成本（元）",
          title: `${this.$t('fault.CumulativeTotal')}`,
          key: "sumPrice",
          align: "center",
          minWidth: 220,
            resizable: true
        },
        {
          title: `${this.$t('common.operation')}`,
          slot: "action",
          minWidth: 100,
          align: "center",
          fixed: "right",
        },
      ],
      dataSource: [],
      dateTimeRange: [this.$moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'), this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')],
      companyList: [], // 所属公司
      userList: [],
      orgList:[]
    };
  },
  created() {

      this.getTableColumnsWidth(this.columns)

    this.changeNum();
    this.getCompany();
    this.getUser()
    this.getOrgList()
  },
  methods: {
    getOrgList() {
      this.axios({
        method: 'get',
        url: '/basic/organization/findListByToken',
        params: {level:1}
      }).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'code',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    showLookTable(row) {
      this.isShowDetails = true
      this.repairManId = row.userId
    },
    getCompany() {
      this.axios({
        method: "get",
        url: "/basic/company/getCompanyListByUser",
      }).then((res) => {
        if (res.code === 200) {
          this.companyList = res.data
        }
      });
    },
    getUser() {
      this.axios({
        method: "get",
        url: "/basic/user/searchUser",
      }).then((res) => {
        if (res.code === 200) {
          this.userList = res.data
        }
      });
    },
    //日期
    handleChangeDate(val) {
      this.dateTimeRange = val
    },
    reset(){
      this.searchParams = {};
      this.dateTimeRange = [this.$moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'), this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')];
      this.changeNum();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      //查询列表
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        companyId: this.searchParams.companyId,
        receiveOrderBy: this.searchParams.receiveOrderBy,
        startTime: moment(this.dateTimeRange[0]).format('YYYY-MM-DD 00:00:00'),
        endTime:  moment(this.dateTimeRange[1]).format('YYYY-MM-DD 23:59:59'),
        orgCodes: this.searchParams.orgCodes,
      };
      this.axios({
        method: "post",
        url: "/dms/statistical/repairManList",
        data: params,
      }).then((res) => {
        if (res.code === 200) {
          this.dataSource = res.data.list;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    handleSelectionChange(selectionData) {
      this.ids = selectionData.map(v => v.id);
    },
    //导出
    exportTemplateClick() {
      let params = {
        // pageNo: this.pageNum,
        // pageSize: this.pageSize,
        repairManIds: this.ids,
        companyId: this.searchParams.companyId,
        receiveOrderBy: this.searchParams.receiveOrderBy,
        startTime: this.dateTimeRange[0],
        endTime: this.dateTimeRange[1],
        orgCodes: this.searchParams.orgCodes,
      };
      //const filName = "人员维修报表";
      const filName = `${this.$t('fault.OperatorRepairingReport')}`;
      this.axios({
        method: "post",
        url: "/dms/statistical/repairManListExport",
        responseType: "blob",
        data: params,
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
  },
};
</script>

